<template>
  <div class="container">
    <div class="add-form">
      <el-dialog
        :title="titleInfo.text + titleInfo.pageTitle"
        :visible.sync="dialogFormVisible"
      >
        <el-form
          :rules="ruleInline"
          ref="dataForm"
          :model="formBase"
          label-position="left"
          label-width="150px"
          style="width: 80%; margin-left: 10px"
        >
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="formBase.title"></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="articleBody" class="editor">
            <quillEditor
              v-model="formBase.articleBody"
              :options="editorOption"
            />
          </el-form-item>
          <el-form-item label="视频地址" prop="videoURL">
            <el-input
              v-model="formBase.videoURL"
              placeholder="请输入视频地址"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormH">{{ $t("table.cancel") }}</el-button>
          <el-button type="primary" @click="createData">{{
            $t("table.confirm")
          }}</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { update, add } from '@/api/hmmm/articles'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'ArticlesAdd',
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    }
  },
  components: { quillEditor },
  data () {
    return {
      dialogFormVisible: false,
      // 表单验证
      ruleInline: {
        title: [
          { required: true, message: '文章标题不能为空', trigger: 'blur' }
        ],
        content: [{ required: true, message: '文章内容不能为空', trigger: 'blur' }]
      },
      // 文本编辑器展示配置
      editorOption: {
        placeholder: '请输入文章内容', // 占位文字
        modules: {
          // 工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block'],
            ['link', 'image', 'video']
          ]
        }
      }
    }
  },
  computed: {},
  methods: {
    // 弹层显示
    dialogFormV () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    },
    // 表单提交
    createData () {
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          this.dialogFormH()
          const data = {
            ...this.formBase
          }
          if (this.formBase.id) {
            await update(data).then(() => {
              this.$emit('newDataes', this.formBase)
            })
          } else {
            await add(this.formBase).then(() => {
              this.$emit('newDataes', this.formBase)
            })
          }
        } else {
          this.$message.error('*号为必填项!')
        }
      })
    }
  },
  // 挂载结束

  mounted: function () { }
  // 创建完毕状态
  // 组件更新
  // updated: function () { }
}
</script>

<style scoped lang='less'>
.container {
  .add-form {
    .dialog-footer {
      text-align: right;
    }
  }
}
</style>
